<template>
  <div>
   <div>
     <router-link to="/home/workplace">
          <i class="iconfont icon-back"></i>
    </router-link>
     <div class="teaminfo"><el-collapse v-model="activeNames" @change="handleChange">
    <el-collapse-item :title="checkTeamInfo.name" name="1">
    <div>团队名称:{{checkTeamInfo.name}}</div>
    <div >创建者&nbsp;&nbsp;&nbsp;:{{ checkTeamInfo.creator_name }}</div>
    <div >成员数量:{{ checkTeamInfo.member_count }}</div>
    <div class="text item">{{ checkTeamInfo.intro }}</div>
  </el-collapse-item>
  
</el-collapse>

</div>
      <el-button type="primary" @click="createTeamArticle" class="button-create">创建文档</el-button>
      <el-button type="danger" @click="handleDissolve" class="button-diss">解散团队</el-button>
      <el-button @click="drawer = true" type="warning" style="margin-left: 16px;" class="button-drawer">管理成员</el-button>
   </div>
   <hr>

    <el-drawer :visible.sync="drawer" :direction="direction" :before-close="handleClose" size='30%'>
      <div style="font-size: 23px;margin-bottom: 30px;margin-top: -10px;margin-left:35%;">{{checkTeamInfo.name}}团队</div>
      <div style="text-align: right; margin-right: 38px;margin-top: 10px；margin-left:20px;"><el-button type="success" size="mini" @click="invite">邀请新成员</el-button></div>
      <ul>

        <li v-for="(checkTeamMember, index) in checkTeamMemberList" :key="index" @click="handleOther(checkTeamMember)">
            <Member :title="checkTeamMember.name">
              <el-avatar size="small" :src="checkTeamMember.avatar" slot="left"></el-avatar>
              
              <el-button type="primary" slot="right" size="mini" class="memowner" v-if="index===0">创建者</el-button>
              <!--<el-button type="warning" round slot="right" size="mini" class="memdelete" @click="handleAuth(checkTeamMember)" v-if="index!=0">权限设置</el-button>  -->
              <el-button type="warning" slot="right" size="mini" v-if="checkTeamMember.auth==='read'&&index!=0" @click="handlechangeAuth(checkTeamMember)">可读</el-button>
              <el-button type="warning" slot="right" size="mini" v-if="checkTeamMember.auth==='write'&&index!=0" @click="handlechangeAuth(checkTeamMember)">可写</el-button>
              <el-button type="danger" slot="right" size="mini" class="memdelete" @click="handleDeleteMem(checkTeamMember)" v-if="index!=0">删除成员</el-button>
            </Member>
        </li>
      </ul>

      
      
    </el-drawer>
    <el-row>
      <el-col :span="2" v-for="(teamArticleItem, index) in teamArticleList" :key="index" :offset="index%8==0?0:1">
        <el-card :body-style="{ padding: '0px' }" shadow="hover" style="margin-bottom: 20px; -webkit-transition-duration:0.3s; -webkit-transition-timing-function:linear; -webkit-transition-delay:0.01s;">
          <TeamArticle :teamArticleItem="teamArticleItem"/>
        </el-card>
      </el-col>
    </el-row>
  </div>
  
</template>
<script>

import Member from '../../components/Member'
import TeamArticle from '../../components/TeamArticle'
import {mapState,mapActions} from 'vuex'
import {reqDisband,reqOutTeam,reqOutTeamMessage,reqSearchInviteUser,reqInviteUser,reqChangeAuth} from '../../api'
export default {
  name: 'Created',
  components: {Member,TeamArticle},
  data() {
    return {
      drawer: false,
      direction: 'rtl',
      currentDate: new Date(),
      title:"",
      options: [
            {
          value: 'read',
          label: '可读',
          }, 
          {
          value: 'write',
          label: '可写',
          }
      ],
    
    };
  },
  computed:{
    ...mapState(['userInfo','checkTeamInfo','checkTeamMemberList','teamArticleList','otherUserInfo']),
  },
  mounted(){
      console.log(this.checkTeamInfo)
      console.log('----')
      console.log(this.userInfo.userid)
      this.getTeamArticle(this.checkTeamInfo.tid)
      console.log(this.teamArticleList)
      this.getTeamMemberInfo(this.checkTeamInfo)
      console.log('89')
      console.log(this.checkTeamMemberList)

      console.log('7654321')
      console.log(this.checkTeamMember)

      
  },
  methods: {
    ...mapActions(['getTeamArticle','getMyCreateTeam','getMyTeam','getTeamInfo','getTeamMemberInfo',
      'getOtherUserInfo']),
    async handleClose(done) {
     
      this.$confirm('管理完成！')
        .then(_ => {
          
          done();
          this.drawer=false;
        })
        .catch(_ => {
          this.drawer=true;
        });
    },
    async handlechangeAuth(checkTeamMember){
      console.log(checkTeamMember.auth)
      if(checkTeamMember.auth==="write"){
          const result =await reqChangeAuth(this.checkTeamInfo.tid,this.userInfo.userid,"read",false,checkTeamMember.acc)
          console.log(result)
          console.log('asf')
          this.getTeamMemberInfo(this.checkTeamInfo)
          console.log(checkTeamMember.auth)
      }
      else{
        const result =await reqChangeAuth(this.checkTeamInfo.tid,this.userInfo.userid,"write",false,checkTeamMember.acc)
        console.log(result)
        console.log('fdg')
        this.getTeamMemberInfo(this.checkTeamInfo)
        console.log(checkTeamMember.auth)
      }
      
      
      console.log('231')
    },
    async handleDissolve() {
        //解散团队:teamid
        if(this.checkTeamInfo) {
          //我创建\加入的团队列表减少一个团队
          console.log(this.checkTeamInfo)
          
          const result=await reqDisband(this.checkTeamInfo.tid,this.userInfo.userid)

          console.log(result)
         // console.log(result)
          //重新获取创建团队列表
          this.getMyCreateTeam()
          //重新获取加入团队列表
       //   this.getMyTeam()
          if(result.error_code===0) {
            this.$router.back(),
            this.$message({
            type: 'success',
            message: '解散成功!'
             });
            setTimeout(() => {
              this.getMyCreateTeam()
            //  this.getMyTeam()
            }, 200)

          }
          else{
            alert("没有权限解散团队")
            return
          }
        }
        
      
    },
    //删除团队成员reqOutTeam(踢人)
    handleDeleteMem(checkTeamMember) {
      this.$confirm('此操作将删除该成员, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        this.$message({
          type: 'success',
          message: '已删除成员!'
        });
        console.log(checkTeamMember)
        //删除成员userid,teamid
        console.log(this.checkTeamInfo.tid)
        console.log(this.userInfo.userid)
        console.log(checkTeamMember.uid)
        const result=await reqOutTeam(this.checkTeamInfo.tid,this.userInfo.userid,checkTeamMember.uid)
        console.log(result)
        //重新刷成员列表
        await this.getTeamMemberInfo(this.checkTeamInfo)
        
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    invite() {
      this.$prompt('请输入邀请用户邮箱', '邀请新成员', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(async ({ value }) => {
        //邀请新成员reqSearchInviteUser
        const res=await reqSearchInviteUser(this.checkTeamInfo.tid,this.userInfo.userid,'write',true,value)
        console.log(res)
        if(res.error_code===0){//邀请成功
          this.$message({
            type: 'success',
            message: '你邀请的新成员是: ' + value
          });
          //发出邀请消息
          const res1=await reqInviteUser(this.checkTeamInfo.teamid,res.userid,this.userInfo.userid)
          console.log(res1)
        }
        else{
          this.$message({
            type: 'danger',
            message:res.message
          });
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    },
    //处理点击成员，跳转成员信息页面
    handleOther(checkTeamMember){
      if(checkTeamMember.userid){
        this.getOtherUserInfo(checkTeamMember.userid)
        console.log(this.otherUserInfo)
      }
    },
    createTeamArticle(){
    this.$router.replace('/teamedit')
    console.log(this.checkTeamInfo)
    console.log(this.teamArticleList)
    
    }
  }
}
</script>

<style>
a{
  text-decoration: none;

}
.teaminfo{
  width: 200px;
  height: 70px;
  margin-top: 30px;
  margin-left: 200px;

}
.button-drawer{
  position: absolute;
  top:30px;
  right: 30px;
}
.button-diss{
  position: absolute;
  top:30px;
  right: 150px;
}
.button-create{
  position: absolute;
  top:30px;
  right: 270px;
}
.el-drawer.rtl {
  overflow-y: scroll
}
.memowner{
  opacity:1;
}
.memdelete{
  opacity:1;
}
li{
  margin: 10px;
  padding: 5px;
  vertical-align: center;
}
li:hover{
  color: #409EFF;
}
li:hover .memdelete{
  opacity: 1;
}
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
  margin-top: 8px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
.box {
  width: 400px;
}
.top {
  text-align: center;
}

.left {
  float: left;
  width: 60px;
}

.right {
  float: right;
  width: 60px;
}

.bottom {
  clear: both;
  text-align: center;
}

/*.item {*/
/*  margin: 4px;*/
/*}*/

.left .el-tooltip__popper,
.right .el-tooltip__popper {
  padding: 8px 10px;
}
.text {
  /*font-size: 16px;*/
  /*letter-spacing: 2px;*/
}

.item {
  margin-bottom: 18px;
}
</style>

